<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>

    <!-- Google APIs Key for madrivergroup DNS -->
    <script type="text/javascript"
            src="http://www.google.com/jsapi?key=ABQIAAAA76OUMPln1nV1Ic32eFRSihQOSll7pvnbmBuLp3H2lUE6zoCtrRQ6PCKTbe-Revca3m2WLxLpABpUWw"
    </script>

    <!-- All of the needed JavaScript files -->
<!--
    <script src="scripts/elabel.js"              type="text/javascript"></script>
    <script src="scripts/mapiconmaker.js"        type="text/javascript"></script>
    <script src="scripts/biketrails.js"          type="text/javascript"></script>
-->

    <script src="scripts/biketrails.js"          type="text/javascript"></script>
    <script src="scripts/jquery-1.2.6.min.js"    type="text/javascript"></script>


   <script type="text/javascript">

       // Load Maps API
       google.load("maps","2");

       var bikeMgr = new BikeTrailManager();


       // Initialize our Trail
       function initializeBikeTrail() {

            // Display the map, with small controls and all of the types of maps
            bikeMgr.map = new google.maps.Map2(document.getElementById("map_canvas"));


            bikeMgr.map.addControl(new google.maps.SmallMapControl());
            var topRight = new google.maps.ControlPosition(G_ANCHOR_TOP_RIGHT, new google.maps.Size(10,10));
            bikeMgr.map.addControl(new google.maps.MapTypeControl(), topRight );
      
            // Add the Terrain Map Control
            bikeMgr.map.addMapType( G_PHYSICAL_MAP );
            bikeMgr.map.setMapType( G_PHYSICAL_MAP );
      
            // Center at the base on Eurish Pond Parking lot
            bikeMgr.map.setCenter(new google.maps.LatLng(44.148441,-72.87419), 15);

/*****

            // Set up marker mouseover Tooltip in div
            var tooltip = document.createElement("div");
            bikeMgr.mapTooltip = tooltip;
            bikeMgr.map.getPane(G_MAP_FLOAT_PANE).appendChild(tooltip);
            tooltip.style.visibility="hidden";

            // Defines if logging is on
            isLoggingOn = true;

		    // Need to pull this information from database
            var nameOfXmlFiles = new Array();
         	nameOfXmlFiles[0]  = "cyclone_working";
         	nameOfXmlFiles[1]  = "cyclone_workingII";


            //
            // Read the data from xml files and process
            //
         	for( var i = 0; i < nameOfXmlFiles.length; i++ ) {
		   
               var fileName = nameOfXmlFiles[ i ];
               var xmlFile = "xml/" + fileName + ".xml";

               // Create a New Trail and add G components
	           loadAndProcessXmlFile( xmlFile, bikeMgr );
			 

			   // add trails to option list
               var option = '<option value="' + (i + 1) + '" >' + fileName + '</option>';
               var trailSelectElement = $("#listOfTrails");
               trailSelectElement.append( option );
            }


*****/


       } // end of initializeBikeTrail()

       google.setOnLoadCallback( initializeBikeTrail );
   </script>



   <script type="text/javascript">
    //<![CDATA[

    //]]>
    </script>
				 
  </head>




  <body>

      <div id="map_canvas" class="map_canvas"></div>
      <div id="map_control" class="map_control">
         <table border="0" cellpadding="1">
           <tr>
            <td nowrap>Zoom to State:</td>		
            <td nowrap>
              <select name="state" class="state" style="background-color:#FFFFFF;">
                <option>
                  <option  value="VT">VT</option>
               </select>	
             </td>
         
            <td nowrap>County:</td>		
            <td nowrap>
              <select name="county" class="state" style="background-color:#FFFFFF;">
                <option>
                  <option  value="washington">Washington</option>
               </select>	
             </td>
         
            <td nowrap>Town:</td>		
            <td nowrap>
              <select id="listOfTowns" name="listOfTowns" class="listOfTowns" style="background-color:#FFFFFF;">
                <option>
                  <option  value="Warren">Warren</option>
                  <option  value="Waitsfield">Waitsfield</option>
               </select>	
             </td>
   
            <td nowrap>Trails:</td>		
            <td nowrap>
              <select id="listOfTrails" name="trails" class="trails" style="background-color:#FFFFFF;">
                <option>
                  <option  value="0" default>All</option>
               </select>	
             </td>
   					
           </tr>
         </table>
    </div>
   
 
  </body>

</html>
